<template>
  <div id="info">
    <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
    <h2>相对值</h2>
    <p>Tweening to relative values, with repeat.</p>
  </div>
  <div class="description">
    const tween1 = new TWEEN.Tween(target1.dataset).to({ top: "+20", left: "-20" }, 500)
  </div>
  <div style="position: absolute; left: 400px">
    <div
      id="target1"
      style="position: absolute"
      data-top="150"
      data-left="150"
      class="box"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import createGraph from "./core/createGraph";
import { ref, onMounted } from "vue";
function init() {
  var target1 = document.getElementById("target1"),
    tween1 = new TWEEN.Tween(target1.dataset)
      .to({ top: "+20", left: "-20" }, 500)
      .repeat(5)
      .delay(500)
      .easing(TWEEN.Easing.Exponential.In)
      .onUpdate(function (object) {
        object.top = Math.round(object.top);
        object.left = Math.round(object.left);
        updateBox(target1, object);
      })
      .start();

  updateBox(target1, target1.dataset);
}

function animate(time?) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}

function updateBox(box, params) {
  var s = box.style;
  var transform = "translate(" + params.left + "px, " + params.top + "px)";
  s.transform = transform;
}
onMounted(() => {
  init();
  animate();
});
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  float: left;
}
#target1 {
  background: #fcc;
}
</style>
